<template>
  <div class="videoDialog" v-if="show">
    <div class="video_content">
      <div class="video_c">
        <div v-drag="show">
          <div class="el-dialog" :style="{ width: styleObj.width, height: styleObj.height }">
            <div class="el-dialog__header">
              <a-col :span="20" class="areaname">{{ areaName || '视频监控' }}</a-col>
              <a-col :span="4" class="close_btn">
                <CloseOutlined class="close_dialog" @click="closeDialog" />
              </a-col>
            </div>
            <video-player :key="videoUrls" :VideoUrl="videoUrls" class="video_item" style="width: 100%; height: 100%" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import videoPlayer from '../video.vue';
import { GetareacameraReal } from '@/api/base/device/camera';
import { defineComponent, ref, watch } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import { getToken } from '@/utils/auth';
import { videoStore } from '@/store/modules/video.ts'
const videoStoreIns = videoStore()
export default new defineComponent({
  name: 'videoDialog',
  components: {
    videoPlayer,
    CloseOutlined,
  },
  directives: {
    drag: {
      mounted(el, binding, vnode, oldVnode) {
        const value = binding.value;
        if (value == false) return;

        // 获取拖拽内容头部
        const dialogHeaderEl = el.querySelector('.el-dialog__header');
        const dragDom = el.querySelector('.el-dialog');
        dialogHeaderEl.style.cursor = 'move';
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
        dragDom.style.marginTop = 0;
        let width = dragDom.style.width;
        if (width.includes('%')) {
          width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
        } else {
          width = +width.replace(/\px/g, '');
        }
        dragDom.style.left = `${(document.body.clientWidth - width) / 2}px` + '!important';
        // 鼠标按下事件
        dialogHeaderEl.onmousedown = (e) => {
          dragDom.style.setProperty('position', `absolute`, 'important');

          // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
          const disX = e.clientX - dialogHeaderEl.offsetLeft;
          const disY = e.clientY - dialogHeaderEl.offsetTop;

          // 获取到的值带px 正则匹配替换
          let styL, styT;

          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          if (sty.left.includes('%')) {
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
          } else {
            styL = +sty.left.replace(/\px/g, '');
            styT = +sty.top.replace(/\px/g, '');
          }

          // 鼠标拖拽事件
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
            const l = e.clientX - disX;
            const t = e.clientY - disY;

            let finallyL = l + styL;
            let finallyT = t + styT;

            // 移动当前元素
            dragDom.style.setProperty('left', `${finallyL}px`, 'important');
            dragDom.style.top = `${finallyT}px`;
          };

          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  setup() {
    const videoUrls = ref([]);

    const VideoUrlsShow = ref({});

    const data = ref({});

    const show = ref(false);

    const isNotShow = ref(false);
    const isOnly = ref(false);

    const warText = ref('');

    const areaName = ref('');
    const warObj = ref({});
    const closeCallback = ref()
    const timeOutShow = ref(false)
    watch(
      () => warText.value,
      (n) => {
        warText.value = n;
        playAudio();
      },
    );

    const playAudio = () => {
      let str = warText.value;

      let audio = document.createElement('audio');

      audio.autoplay = true;

      if (!str) return;

      audio.src = window.config.base_url + `Warnings/TTS?text=${str}&access_token=${getToken()}`;

      if (!document.querySelector('audio')) {
        // 如果没有音频标签 就新增
        document.body.appendChild(audio);

        setTimeout(() => {
          audio.play();
        }, 500);
      } else {
        document.body.removeChild(document.querySelector('audio'));
        document.body.appendChild(audio);
        setTimeout(() => {
          audio.play();
        }, 500);
      }
    };

    const init = (data, text, textObj) => {
      if (data) {
        data.value = data;
      }
      areaName.value = data.value.areaName
      timeOutShow.value = data.value.timeOutShow
      GetUrl(data.value.areafidList);
      if (text) {
        warText.value = text;
      }
    };

    const GetUrl = (list) => {
      videoUrls.value = list;
      if (!isNotShow.value) {
        show.value = true;
      }
    };

    const closeDialog = (item) => {
      if (timeOutShow.value) {
        show.value = false
        setTimeout(() => {
          show.value = true
        }, 5000)
      } else {
        const deviceId = videoUrls.value.split("id=")[1]
        videoStoreIns.del(deviceId)
        videoUrls.value = ""
        show.value = false
      }
    };
    const styleObj = ref({

    })
    const setBoxStyle = (obj) => {
      styleObj.value = obj
    }
    return {
      styleObj,
      setBoxStyle,
      show,
      areaName,
      videoUrls,
      closeDialog,
      GetUrl,
      init,
      isOnly,
      timeOutShow
    };
  },
});
</script>

<style lang="scss" scoped>
.el-dialog {
  position: static !important;
}

.el-dialog__header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 30px;
  background-color: rgb(0 0 0 / 40%);
  color: #fff;
  line-height: 30px;
}

.el-dialog:not(.is-fullscreen) {
  left: auto !important;
  margin: 0 !important;
}

.videoDialog {
  position: relative;
  z-index: 99999;
  height: 0;
  margin: 0;
  transition: all .3s ease;

  .video_content {
    display: flex;
    position: relative;
    left: 0;
    flex-wrap: wrap;
    width: 100%;
    font-size: 14px;

    .video_c {
      margin: 10px 5px;
    }

    .dialog_title {
      visibility: hidden;
      position: absolute;
      z-index: 99999;
      top: 0;
      right: 0;
      width: 100%;
      height: 30px;
      padding: 0;
      background-color: rgb(0 0 0 / 50%);
      color: #fff;
      font-size: 14px;
      line-height: 30px;

      .areaname {
        padding-left: 10px;
      }

      .close_btn {
        text-align: right;
      }

      .close_dialog {
        font-size: 20px;
      }

      .close_dialog:hover {
        cursor: pointer;
      }
    }
  }

  .video_content:hover {
    .dialog_title {
      visibility: visible;
    }
  }
}
</style>
